import axios from '../../axios/api'
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import imgs from '../../img/image.png'

import { Button, NavBar, Space, Toast } from 'antd-mobile'
function Detail() {
    const [data, setData] = useState([])
    const [params] = useSearchParams();
    const id = params.get('id')
    const navigate = useNavigate()

    const getData = async () => {
        const res = await axios.get(`/api/trip/train/detail?id=${id}`);
        const { code, data } = res.data
        console.log(res);

        if (code == 200) {
            setData(data)
        }

    }
    useEffect(() => {
        getData()
    }, [])

    const pay = async () => {
        const res = await axios.get('/api/pay', {
            params: {
                id: 4,
                price: 100,
                title: '火车票'

            }
        })
        const { code, data } = res.data

        // 跳转支付页面
        if (code == 200) {
            window.location.href = data
            window.open(data, '_blank')

        } else {
            Toast.show({
                content: '支付失败',
                icon: 'fail',
            })
        }



    }


    return (
        <div>
            <NavBar >确认订单</NavBar>
            <div>
                <div>
                    <div>
                        <img src={imgs} alt="" />
                    </div>

                    <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                        <p style={{ fontSize: '20px', color: 'orange' }}>100</p>
                        <Button onClick={() => pay()}>点击提交订单</Button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Detail